<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <title>《Flutter之Stack用法小结》 - Lucklyの博客 - 在阅读中遇见自己</title><meta name="Description" content="早起的年轻人做的网站"><meta property="og:title" content="《Flutter之Stack用法小结》" />
<meta property="og:description" content="
本文主要介绍记录一下如何使用 Flutter Stack Widget 来将文本跟图片中的某个特定点对齐。
" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://luckly.work/flutter%E4%B9%8Bstack%E7%94%A8%E6%B3%95%E5%B0%8F%E7%BB%93/" />
<meta property="og:image" content="https://luckly.work/logo.png"/>
<meta property="article:published_time" content="2021-07-31T21:14:43+08:00" />
<meta property="article:modified_time" content="2021-07-31T21:14:43+08:00" />
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://luckly.work/logo.png"/>

<meta name="twitter:title" content="《Flutter之Stack用法小结》"/>
<meta name="twitter:description" content="
本文主要介绍记录一下如何使用 Flutter Stack Widget 来将文本跟图片中的某个特定点对齐。
"/>
<meta name="application-name" content="LoveIt">
<meta name="apple-mobile-web-app-title" content="LoveIt"><meta name="theme-color" content="#ffffff"><meta name="msapplication-TileColor" content="#da532c"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="https://luckly.work/flutter%E4%B9%8Bstack%E7%94%A8%E6%B3%95%E5%B0%8F%E7%BB%93/" /><link rel="prev" href="https://luckly.work/flutter%E4%B9%8Bprecacheimage%E8%A7%A3%E6%9E%90/" /><link rel="next" href="https://luckly.work/flutter-sizedoverflowbox-%E7%AE%80%E4%BB%8B%E5%8F%8A%E6%A1%88%E4%BE%8B/" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css"><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "《Flutter之Stack用法小结》",
        "inLanguage": "zh-CN",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https:\/\/luckly.work\/flutter%E4%B9%8Bstack%E7%94%A8%E6%B3%95%E5%B0%8F%E7%BB%93\/"
        },"image": [{
                            "@type": "ImageObject",
                            "url": "https:\/\/luckly.work\/images\/Apple-Devices-Preview.png",
                            "width":  3200 ,
                            "height":  2048 
                        }],"genre": "posts","keywords": "flutter","wordcount":  1469 ,
        "url": "https:\/\/luckly.work\/flutter%E4%B9%8Bstack%E7%94%A8%E6%B3%95%E5%B0%8F%E7%BB%93\/","datePublished": "2021-07-31T21:14:43+08:00","dateModified": "2021-07-31T21:14:43+08:00","license": "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.","publisher": {
            "@type": "Organization",
            "name": "xxxx","logo": {
                    "@type": "ImageObject",
                    "url": "https:\/\/luckly.work\/images\/avatar.png",
                    "width":  528 ,
                    "height":  560 
                }},"author": {
                "@type": "Person",
                "name": "早起的年轻人"
            },"description": ""
    }
    </script></head>
    <body header-desktop="fixed" header-mobile="auto"><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('auto' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : 'auto' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><div class="logo-wrapper">
  <a href="/%20/" class="logo">Lucklyの博客 - 在阅读中遇见自己</a>
</div>

<nav class="site-navbar">
  <ul id="menu" class="menu">
    <li class="menu-item">
      <a class="menu-item-link" href="/posts/">所有文章</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/flutter/">Flutter</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/read/">读书笔记</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/go/">Go</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/tags/">标签</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/">分类</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/about/">关于</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="https://github.com/ITmxs">Github</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/friend/">友链</a>
    </li>
  </ul>
</nav><main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">目录</h2>
            <div class="toc-content" id="toc-content-auto"></div>
        </div><article class="page single"><h1 class="single-title animated flipInX">《Flutter之Stack用法小结》</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="/" title="Author" rel=" author" class="author"><i class="fas fa-user-circle fa-fw"></i>早起的年轻人</a></span>&nbsp;<span class="post-category">收录于 <a href="/categories/flutter/"><i class="far fa-folder fa-fw"></i>Flutter</a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="2021-07-31">2021-07-31</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;约 1469 字&nbsp;
                <i class="far fa-clock fa-fw"></i>&nbsp;预计阅读 3 分钟&nbsp;</div>
        </div><div class="featured-image"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        title="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png" /></div><div class="details toc" id="toc-static"  kept="">
                <div class="details-summary toc-title">
                    <span>目录</span>
                    <span><i class="details-icon fas fa-angle-right"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents">
  <ul>
    <li><a href="#图片缩放">图片缩放</a></li>
    <li><a href="#控件定位">控件定位</a></li>
    <li><a href="#解决方案">解决方案</a>
      <ul>
        <li><a href="#方案一">方案一</a></li>
        <li><a href="#方案二">方案二</a></li>
      </ul>
    </li>
  </ul>
</nav></div>
            </div><div class="content" id="content"><blockquote>
<p>本文主要介绍记录一下如何使用 Flutter Stack Widget 来将文本跟图片中的某个特定点对齐。</p>
</blockquote>
<p>某个产品需求要求显示本月累计签到天数，于是设计给了开发如下一张图。</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817377604093.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817377604093.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817377604093.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817377604093.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817377604093.jpg"
        title="-w420" /></p>
<p>设计姐姐”好心”地将文案也写好了，只留了个格让开发填，够简单吧。但其实开发很头疼：”累计签到”那一行文案是特殊字体，所以并不能吐槽设计的切图方式完全不合理。但问题是对背景图”填空”容易引起适配问题，稍有不慎就如下图一样没对齐。</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817384649043.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817384649043.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817384649043.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817384649043.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817384649043.jpg"
        title="-w314" /></p>
<p>接下来看如何在 Flutter 中解决上述对齐问题。涉及到的几个要点：</p>
<ul>
<li>图片缩放 - 我们知道图片适配不同大小屏幕大小</li>
<li>了解 <code>Image.fit</code> 属性 - 这个属性控制着图片如何缩放</li>
<li>了解 <code>Stack</code> + <code>Positioned</code> 的基本用法</li>
<li>了解 <code>Stack</code> + <code>Align</code> 的基本用法</li>
</ul>
<h1 id="图片缩放">图片缩放</h1>
<p>我们知道图片适配不同大小屏幕时必然出现不同程度的缩放。Flutter 中使用 <code>Image</code> 控件显示图片，<code>Image.fit</code> 属性则用于控制图片缩放方式。<code>fit</code> 属性为枚举类型 <code>BoxFit</code>，最常用值的包括如下几种：</p>
<ul>
<li><code>fill</code> - Fill the target box by distorting the source’s aspect ratio.</li>
<li><code>contain</code> - As large as possible while still containing the source entirely within the target box.</li>
<li><code>cover</code> - As small as possible while still covering the entire target box.</li>
</ul>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817395834810.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817395834810.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817395834810.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817395834810.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817395834810.jpg"
        title="box_fit_fill.png (300×90)" /></p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817396100662.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817396100662.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817396100662.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817396100662.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817396100662.jpg"
        title="box_fit_contain.png (300×90)" /></p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817396361784.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817396361784.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817396361784.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817396361784.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817396361784.jpg"
        title="box_fit_cover.png (300×90)" /></p>
<p>先来看如何将背景图铺满 <code>Stack</code>。代码如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">Stack(
  children: &lt;Widget&gt;[
    Image.asset(
      &#39;images/sign_in/sign_in_head.webp&#39;,
    ),
  ]
)
</code></pre></td></tr></table>
</div>
</div><p>不同参数时效果分别如下：</p>
<p><code>Image.asset(width: null, fit: null)</code>
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817527373819.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817527373819.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817527373819.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817527373819.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817527373819.jpg"
        title="-w595" /></p>
<p><code>Image.asset(width: double.infinity, fit: null)</code>
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817530863297.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817530863297.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817530863297.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817530863297.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817530863297.jpg"
        title="-w579" /></p>
<p><code>Image.asset(width: double.infinity, fit: BoxFit.fill)</code>
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817531751686.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817531751686.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817531751686.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817531751686.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817531751686.jpg"
        title="-w576" /></p>
<p><code>Image.asset(width: double.infinity, fit: BoxFit.cover)</code>
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817532756950.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817532756950.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817532756950.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817532756950.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817532756950.jpg"
        title="-w571" /></p>
<p>就这里的场景而言(图片高度无限制)，<code>BoxFit.cover</code> 和 <code>BoxFit.fill</code> 效果无区别。不过 <code>BoxFit.cover</code> 保证图片不会变形，是个更好的选择。</p>
<h1 id="控件定位">控件定位</h1>
<p><a href="https://api.flutter.dev/flutter/widgets/Stack-class.html" target="_blank" rel="noopener noreffer">Stack 类</a>用于对若干个控件以层叠方式布局。例如：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">Stack(
  children: &lt;Widget&gt;[
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Container(
      width: 90,
      height: 90,
      color: Colors.green,
    ),
    Container(
      width: 80,
      height: 80,
      color: Colors.blue,
    ),
  ],
)
</code></pre></td></tr></table>
</div>
</div><p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817536932540.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817536932540.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817536932540.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817536932540.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817536932540.jpg"
        title="img" /></p>
<p><code>Stack</code> 控件的子节点要么是 <code>positioned</code> (<code>Positioned</code> 或 <code>Align</code> 控件) 要么是 <code>non-positioned</code>。<code>Stack</code> 控件的大小刚好包含所有的 <code>non-positioned</code> 子控件(这些控件默认位于 Stack 的左上角)。而 <code>positioned</code> 子节点的位置，则由其 top, right, bottom, left 属性来决定。</p>
<p><code>Positioned</code> 和 <code>Align</code> 控件都能用于 <code>Stack</code> 控件定位和对齐。<code>Positioned</code> 以 top, right, bottom, left 属性来定位，这些属性分别用于指定控件到 Stack 各边框的距离；<code>Align</code> 以 <code>Alignment(x, y)</code> 属性来定位，这些属性分别用于指定控件水平方向和垂直方向的距离范围。</p>
<p><code>Alignment</code> 的 x, y 属性规定如下：</p>
<ul>
<li><code>Alignment(0.0, 0.0)</code> - 表示矩形中点</li>
<li><code>Alignment(-1.0, -1.0)</code> - 表示矩形左上角</li>
<li><code>Alignment(1.0, 1.0)</code> - 表示矩形右下角</li>
</ul>
<p>关于 <code>Stack</code> 有一个小细节要注意。通过如下两个例子说明：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">Scaffold(
  appBar: AppBar(title: Text(&#39;hello&#39;)),

  body: Stack(
    children: &lt;Widget&gt;[
      Align(
        alignment: Alignment(0, 0),
        child: Text(&#39;hello, stack&#39;),
      )
    ],
  ),
</code></pre></td></tr></table>
</div>
</div><p>这个例子中，<code>Text</code> 按预期居显示：</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817549810555.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817549810555.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817549810555.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817549810555.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817549810555.jpg"
        title="-w337" /></p>
<p>然而，当 Stack 外面嵌套一个 Column 或 ListView 之后，Align 似乎在垂直方向失去了定位的作用。</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">Scaffold(
  appBar: AppBar(title: Text(&#39;hello&#39;)),

  body: Column(
    children: &lt;Widget&gt;[
      Stack(
        children: &lt;Widget&gt;[
          Align(
            alignment: Alignment(0, 0),
            child: Text(&#39;hello, stack&#39;),
          )
        ],
      ),
    ],
  ),
</code></pre></td></tr></table>
</div>
</div><p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817551181468.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817551181468.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817551181468.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817551181468.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817551181468.jpg"
        title="-w324" /></p>
<p>我们观察 Stack 外面嵌套一个 Column 或 ListView 之后控件树，截图如下：</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817553643641.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817553643641.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817553643641.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817553643641.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817553643641.jpg"
        title="-w549" /></p>
<p>所以这个现象不难理解：</p>
<ul>
<li>Stack 外面无嵌套时，它占满了父控件，所以 <code>Align</code> 生效</li>
<li>Stack 外面嵌套 <code>Column</code> 或 <code>ListView</code> 时，Stack 大小未指定(最终以 <code>Text</code> 大小为准)，所以 <code>Align</code> 从视觉效果上看在垂直方向不起作用。</li>
</ul>
<p>给 Stack 指定大小就能解决这个问题。这里使用 <code>SizedBox</code> 指定 Stack 高度为 300。</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817557227844.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817557227844.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817557227844.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817557227844.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817557227844.jpg"
        title="-w551" /></p>
<h1 id="解决方案">解决方案</h1>
<h2 id="方案一">方案一</h2>
<p>方案一使用 <code>Stack</code> + <code>Positioned</code> 定位，代码如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">  @override
  Widget build(BuildContext context) {
    // 计算屏幕宽度
    double width = MediaQuery.of(context).size.width;
    // 计算图片缩放比
    final scale = width / 375.0;
    return Stack(children: &lt;Widget&gt;[
      Image.asset(
        _signInHeadBg,
        width: double.infinity,
        fit: BoxFit.cover,
      ),
      // 使用 Positioned 定位，指定 top 和 right 边距
      Positioned(
        top: 113 * scale,
        right: 108 * scale,
        child: Text(
          &#39;2&#39;,
          style: TextStyle(color: c_FFFFFFFF, fontSize: 12),
        ),
      ),
    ]);
}
</code></pre></td></tr></table>
</div>
</div><p>注意这里的实现细节，即按图片缩放比 scale 来调整 top 和 right，保证不同大小屏幕上都能完美适配。</p>
<h2 id="方案二">方案二</h2>
<p>方案二使用 <code>Stack</code> + <code>Align</code> 定位，代码如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">Widget build(BuildContext context) {
  double width = MediaQuery.of(context).size.width;
  return SizedBox(
    width: width,
    height: 798.0 / 634 * width,
    child: Stack(
      children: &lt;Widget&gt;[
        Image.asset(
          _signInHeadBg,
          width: double.infinity,
          fit: BoxFit.cover,
        ),
        Align(
          child: Text(
            &#39;2&#39;,
            style: TextStyle(color: c_FFFFFFFF, fontSize: 12),
          ),
          alignment: Alignment(0.42, -0.51),
        ),
      ],
    ),
  );
</code></pre></td></tr></table>
</div>
</div><p>注意这里的实现细节，即为 <code>Stack</code> 添加一个指定大小的 <code>SizeBox</code>(大小与图片显示的大小相同)，保证不同大小屏幕上都能完美适配。</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817565491620.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817565491620.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817565491620.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817565491620.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817565491620.jpg"
        title="-w547" /></p>
<p>如果不为 <code>Stack</code> 指定大小，则 <code>Align</code> 在垂直方向不生效。如下图：</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817566311909.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817566311909.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817566311909.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817566311909.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/02/15/15817566311909.jpg"
        title="-w547" /></p></div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>更新于 2021-07-31</span>
            </div>
            <div class="post-info-license"></div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md"></div>
            <div class="post-info-share">
                <span><a href="javascript:void(0);" title="分享到 Twitter" data-sharer="twitter" data-url="https://luckly.work/flutter%E4%B9%8Bstack%E7%94%A8%E6%B3%95%E5%B0%8F%E7%BB%93/" data-title="《Flutter之Stack用法小结》" data-hashtags="flutter"><i class="fab fa-twitter fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Facebook" data-sharer="facebook" data-url="https://luckly.work/flutter%E4%B9%8Bstack%E7%94%A8%E6%B3%95%E5%B0%8F%E7%BB%93/" data-hashtag="flutter"><i class="fab fa-facebook-square fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Hacker News" data-sharer="hackernews" data-url="https://luckly.work/flutter%E4%B9%8Bstack%E7%94%A8%E6%B3%95%E5%B0%8F%E7%BB%93/" data-title="《Flutter之Stack用法小结》"><i class="fab fa-hacker-news fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Line" data-sharer="line" data-url="https://luckly.work/flutter%E4%B9%8Bstack%E7%94%A8%E6%B3%95%E5%B0%8F%E7%BB%93/" data-title="《Flutter之Stack用法小结》"><i data-svg-src="https://cdn.jsdelivr.net/npm/simple-icons@2.14.0/icons/line.svg"></i></a><a href="javascript:void(0);" title="分享到 微博" data-sharer="weibo" data-url="https://luckly.work/flutter%E4%B9%8Bstack%E7%94%A8%E6%B3%95%E5%B0%8F%E7%BB%93/" data-title="《Flutter之Stack用法小结》" data-image="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"><i class="fab fa-weibo fa-fw"></i></a></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section class="post-tags"><i class="fas fa-tags fa-fw"></i>&nbsp;<a href="/tags/flutter/">flutter</a></section>
        <section>
            <span><a href="javascript:void(0);" onclick="window.history.back();">返回</a></span>&nbsp;|&nbsp;<span><a href="/">主页</a></span>
        </section>
    </div>

    <div class="post-nav"><a href="/flutter%E4%B9%8Bprecacheimage%E8%A7%A3%E6%9E%90/" class="prev" rel="prev" title="《Flutter之precacheImage（）解析》"><i class="fas fa-angle-left fa-fw"></i>《Flutter之precacheImage（）解析》</a>
            <a href="/flutter-sizedoverflowbox-%E7%AE%80%E4%BB%8B%E5%8F%8A%E6%A1%88%E4%BE%8B/" class="next" rel="next" title="《Flutter SizedOverflowBox 简介及案例》">《Flutter SizedOverflowBox 简介及案例》<i class="fas fa-angle-right fa-fw"></i></a></div>
</div>
</article></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line">由 <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.79.1">Hugo</a> 强力驱动 | 主题 - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt 0.2.10"><i class="far fa-kiss-wink-heart fa-fw"></i> LoveIt</a>
                </div><div class="footer-line"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2021</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="/" target="_blank">早起的年轻人</a></span>&nbsp;|&nbsp;<span class="license"><a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a></span></div>
        </div>
    </footer></div>

        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="回到顶部">
                <i class="fas fa-arrow-up fa-fw"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="查看评论">
                <i class="fas fa-comment fa-fw"></i>
            </a>
        </div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.css"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/smooth-scroll@16.1.3/dist/smooth-scroll.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/autocomplete.js@0.37.1/dist/autocomplete.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/algoliasearch@4.2.0/dist/algoliasearch-lite.umd.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sharer.js@0.4.0/sharer.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"复制到剪贴板","maxShownLines":10},"comment":{},"cookieconsent":{"content":{"dismiss":"同意","link":"了解更多","message":"本网站使用 Cookies 来改善您的浏览体验."},"enable":true,"palette":{"button":{"background":"#f0f0f0"},"popup":{"background":"#1aa3ff"}},"theme":"edgeless"},"search":{"algoliaAppID":"PASDMWALPK","algoliaIndex":"index.zh-cn","algoliaSearchKey":"b42948e51daaa93df92381c8e2ac0f93","highlightTag":"em","maxResultLength":10,"noResultsFound":"没有找到结果","snippetLength":50,"type":"algolia"}};</script><script type="text/javascript" src="/js/theme.min.js"></script></body>
</html>
